<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" lang="zh">
        
        <title></title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body,html{
                height: 100%;
            }
        </style>
	</head>
	<body>
        <canvas id="q"height="" style="width: 100%;"></canvas>
        
        <script>
         $("#q").attr("height",$(window).height());
        //  $("#q").attr("width",$(window).width());  

            /*
                ① 用setInterval(draw, 33)设定刷新间隔
    
                ② 用String.fromCharCode(1e2+Math.random()*33)随机生成字母
    
                ③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反复生成opacity为0.5的半透明黑色背景
    
                ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;顺序确定显示字母的位置
    
                ⑤ 用fillText(text, x, y); 在指定位置显示一个字母 以上步骤循环进行，就会产生《黑客帝国》的片头效果。
            */
            $(document).ready(function () {
                // 1312
                var s = window.screen;
                var width = q.width = s.width;
                var height = q.height;
                var yPositions = Array(300).join(0).split('');
                var ctx = q.getContext('2d');
                var draw = function () {
                    ctx.fillStyle = 'rgba(0,0,0,.05)';
                    ctx.fillRect(0, 0, width, height);
                    ctx.fillStyle = 'red';
                    ctx.font = '10pt Georgia';
                    yPositions.map(function (y, index) {
                        //text = String.fromCharCode(1e2 + Math.random() * 33);　　//这是随机字母
                        text = parseInt(Math.random() * 2);
                        x = (index * 10) + 10;
                        q.getContext('2d').fillText(text, x, y);
                        if (y > Math.random() * 1e4) {
                            yPositions[index] = 0;
                        } else {
                            yPositions[index] = y + 10;
                        }
                    });
                };
                RunMatrix();
                function RunMatrix() {
                    Game_Interval = setInterval(draw, 50);
                }

                
            });
        </script>
		
		
	</body>
</html>